<script setup lang="ts">
import { onUnmounted } from 'vue';

const props: any = defineProps<{
    ujt: any;
    opt: any;
}>();

const { $fn, $global, $db } = props.ujt;

const { initChannel } = $fn.useChannel(props);
initChannel();

function toggleShow(classname: string) {
    document.querySelectorAll(classname).forEach((s) => {
        if (s.classList.contains('as-channel-nohidden')) {
            s.classList.remove('as-channel-nohidden');
        } else {
            s.classList.add('as-channel-nohidden');
        }
        console.log(s.classList);
    });
}
onUnmounted(() => {
    $db[props.opt.channel] = null;
});
</script>

<template>
    <div class="as-channel-area" v-if="$db[props.opt.channel].stat">
        <div class="as-channel-class">
            <h1>📚 {{ $fn.lg(props.opt.channel + '.ui.class') }}</h1>
            <div class="as-channel-class-area">
                <ChannelClass :ujt="ujt" :opt="opt"></ChannelClass>
            </div>
        </div>
        <div class="as-channel-list">
            <h1>📃 {{ $fn.lg(props.opt.channel + '.ui.list') }}</h1>

            <ChannelListSearch :ujt="ujt" :opt="opt"></ChannelListSearch>
            <div class="as-channel-list-area as-list-nth" :id="'popconfirm' + props.opt.channel + 'area'">
                <PopBoxConfirm :ujt="ujt" :id="'popconfirm' + props.opt.channel"></PopBoxConfirm>
                <ChannelList :ujt="ujt" :opt="opt"></ChannelList>
            </div>
            <div v-if="$db[props.opt.channel].cmPageList.length > 1" class="as-channel-page">
                <ChannelListPage :ujt="ujt" :opt="opt"></ChannelListPage>
            </div>
        </div>
        <div class="as-channel-show">
            <template v-if="$global.location.query?.show">
                <template v-if="$global.location.query?.showty">
                    <h1>📝 {{ $fn.lg(props.opt.channel + '.ui.edit') }}</h1>
                    <ChannelEdit :ujt="ujt" :opt="opt"></ChannelEdit>
                </template>
                <template v-else>
                    <h1>📄 {{ $fn.lg(props.opt.channel + '.ui.show') }}</h1>
                    <ChannelShow :ujt="ujt" :opt="opt"></ChannelShow>
                </template>
            </template>
            <template v-else>
                <h1>📰 {{ $fn.lg(props.opt.channel + '.ui.add') }}</h1>
                <ChannelAdd :ujt="ujt" :opt="opt"></ChannelAdd>
            </template>
        </div>
    </div>
</template>

<style scoped lang="scss"></style>
